<template>
	<view>
		<!-- 自定义顶部 -->
		<u-navbar style="background-color: #007AFF;" :is-back="false" title="订单详情">
			<view class="slot-wrap">
				<u-icon name="arrow-left" style="margin-left: 10rpx;" @tap="getBack" size="45"></u-icon>
				<view class="coupons_left_line"></view>
				<u-icon name="home" @tap="home"  size="40"></u-icon>
			</view>
		</u-navbar>
		<!-- end -->
		<!-- 地图显示 -->
		<map style="width: 100%;height: 600rpx;" 
			:latitude="latitude"  
			:longitude="longitude" 
			:markers="marker" 
			:scale="scale"  
			:polyline="polyline"
		></map>
		<!-- end -->
		<!-- 待支付 -->
		<view class="mattes">
			<view class="size32rpx center" style="font-weight: bold;">
				<label>待支付</label>
				<label class="colorff6 marLeFt20">
					<u-count-down class="count-down-demo"  :timestamp="timestamp" separator="colon" :showBorder="showBorder"
					:separator-color="separatorColor" :showDays="true" :fontSize="fontSize" @change="change" ref="uCountDown"
					:border-color="borderColor" :color="color" @end="end" bg-color="rgb(250, 250, 250)"></u-count-down>
				</label>
			</view>
			<view class="center color99 marTop10">订单提交成功，请尽快完成支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timestamp: 60,//倒计时
				separator: 'colon',
				showBorder: false,
				borderColor: '#303133',
				color: '#fa6600',
				showDays: false,
				fontSize: 28,
				separatorColor: '',
			   latitude:26.56822,
			   longitude: 106.7141,//经度
			   scale:13,//缩放级别
			   compass:true,
			   // show-compass:true,
			   // enable-3D:false,
				polyline:[
					{//指定一系列坐标点，从数组第一项连线至最后一项
					　　　　points:[
						   　　{latitude: 26.56822,longitude: 106.7141},
						  　　 {latitude: 26.57800,longitude: 106.7241},
					　　　　],
					　　　　color:"#ff6600",//线的颜色
					　　　　width:1,//线的宽度
					// 　　　　dottedLine:true,//是否虚线
					　　　　arrowLine:true,    //带箭头的线 开发者工具暂不支持该属性
					　　}
				],
			　　marker: [
	 
			   {
				  　　id:0,
				  　　latitude: 26.56822,//纬度
				  　　longitude: 106.7141,//经度
				  　　iconPath: '',    //显示的图标        
				  　　rotate:0,   // 旋转度数
				  　　width:10,   //宽
				  　　height:20,   //高
				 　　 title:'我在这里',//标注点名
				 　　 alpha:0.5,   //透明度
				 　　 label:{//为标记点旁边增加标签   //因背景颜色H5不支持
				 　　	 content:'Hello,I am here',//文本
			   　　　　	 color:'red',//文本颜色
					  },
				  callout:{//自定义标记点上方的气泡窗口 点击有效  
				  　　content:'取',//文本
				  　　color:'#ffffff',//文字颜色
				  　　fontSize:14,//文本大小
				  　　borderRadius:50,//边框圆角
				 　　 bgColor:'#4DB2FF',//背景颜色
				  　　display:'ALWAYS',//常显
				  },
					   
				},
				{
					 　　id:1,
					 　　latitude: 26.57800,//纬度
					 　　longitude: 107.7241,//经度
					 　　iconPath: '',    //显示的图标        
					 　　rotate:0,   // 旋转度数
					 　　width:10,   //宽
					 　　height:20,   //高
					　　 title:'我在这里',//标注点名
					　　 alpha:0.5,   //透明度
					　　 label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						　　 content:'Hello,I am here',//文本
					  　　　　color:'red',//文本颜色
						 // 　　fontSize:24,//文字大小
						 //    x:5,//label的坐标，原点是 marker 对应的经纬度
						 //    y:1,//label的坐标，原点是 marker 对应的经纬度 
						 //    borderWidth:12,//边框宽度
						 //    borderColor:'pink',//边框颜色    
						 // 　　borderRadius:20,//边框圆角                        
						 // 　　bgColor:'black',//背景色
						 // 　　padding:5,//文本边缘留白
						 //    textAlign:'right'//文本对齐方式。
						},
					 callout:{//自定义标记点上方的气泡窗口 点击有效  
					 　　content:'收',//文本
					 　　color:'#ffffff',//文字颜色
					 　　fontSize:14,//文本大小
					 　　borderRadius:2,//边框圆角
					　　 bgColor:'#FE7E28',//背景颜色
					 　　display:'ALWAYS',//常显
					 },
					 // anchor:{//经纬度在标注图标的锚点，默认底边中点
					 //     x:0,    原点为给出的经纬度
					 //     y:0,
					 // }
								  
					 }
			   ],
			}
		},
		methods: {
			//倒计时
			timestampChange(index) {
				this.timestamp = index == 0 ? 60 : index == 1 ? 86400 : 983272;
			},
			//返回首页
			home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//返回上一页
			getBack(){
				this.$mHelper.back(1)
			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/index.scss';
</style>
